<template>
  <el-card class="bar-center">
    <!--侧边栏-->
    <el-container>
      <el-aside width="180px">
        <div class="aside-item" :class="{active: activeItem==='我的'}" @click="setActiveItem('我的')">
          <span><i class="el-icon-s-home"></i>我的</span>
        </div>
        <div class="aside-item" :class="{active: activeItem==='文学'}" @click="setActiveItem('文学')">
          <span><i class="el-icon-wenxue"></i>文学</span>
        </div>
        <div class="aside-item" :class="{active: activeItem==='人物'}" @click="setActiveItem('人物')">
          <span><i class="el-icon-user"></i>人物</span>
        </div>
        <div class="aside-item" :class="{active: activeItem==='游戏'}" @click="setActiveItem('游戏')">
          <span><i class="el-icon-game"></i>游戏</span>
        </div>
        <div class="aside-item" :class="{active: activeItem==='影视'}" @click="setActiveItem('影视')">
          <span><i class="el-icon-yingshi"></i>影视</span>
        </div>
        <div class="aside-item" :class="{active: activeItem==='动漫'}" @click="setActiveItem('动漫')">
          <span><i class="el-icon-dongman"></i>动漫</span>
        </div>
        <!--<div class="aside-item">-->
        <!--  <span><i class="el-icon-shenghuo"></i>生活</span>-->
        <!--</div>-->
        <div class="aside-item" :class="{active: activeItem==='科技'}" @click="setActiveItem('科技')">
          <span><i class="el-icon-s-opportunity"></i>科技</span>
        </div>
        <div class="aside-item" :class="{active: activeItem==='休闲'}" @click="setActiveItem('休闲')">
          <span><i class="el-icon-xiuxian"></i>休闲</span>
        </div>
        <div class="aside-item" :class="{active: activeItem==='高校'}" @click="setActiveItem('高校')">
          <span><i class="el-icon-gaoxiao"></i>高校</span>
        </div>
        <!--<div class="aside-item">-->
        <!--  <span><i class="el-icon-diqu"></i>地区</span>-->
        <!--</div>-->
        <div class="button" @click="dialogFormVisible = true">创建吧</div>
        <el-dialog title="创建贴吧" :visible.sync="dialogFormVisible" width="600px">
          <!--上传头像-->
          <div style="display:flex; justify-content: center; margin-bottom: 10px;">
            <el-upload
              list-type="picture-card"
              ref="upload"
              accept="image/*"
              :action="actionUrl"
              :show-file-list="false"
              :auto-upload="false"
              :data="barInfo"
              :on-success="onSuccess"
              :on-change="onChange"
            >
              <img
                v-if="imageUrl"
                :src="imageUrl"
                alt=""
                style="height: 100px;width: 100px;"
              >
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <!--上传信息-->
          <el-form label-position="left" label-width="50px" :model="barInfo">
            <!--吧名-->
            <el-form-item label="吧名">
              <el-input v-model="barInfo.name"></el-input>
            </el-form-item>
            <!--分类-->
            <el-form-item label="分类">
              <el-select v-model="barInfo.type" placeholder="请选择吧分类">
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <!--简介-->
            <el-form-item label="简介">
              <el-input type="textarea" autosize v-model="barInfo.introduction"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="createBar">确 定</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </div>
        </el-dialog>
      </el-aside>
      <!--内容-->
      <el-main>
        <bar-block
          class="main-item"
          style="margin-bottom: 10px;"
          v-for="item in barList"
          :bar-info="item"
          :key="item.id"
        />
      </el-main>
    </el-container>
  </el-card>
</template>

<script>
import BarBlock from '@/components/BarBlock'
import { getAllBar, getFollowBar } from '@/api/bar'
import { baseUrl } from '@/utils/const'
import { getId } from '@/utils/auth'

export default {
  components: { BarBlock },
  data () {
    return {
      activeItem: '我的',
      barAllList: [],
      followBarList: [],
      dialogFormVisible: false,
      barInfo: {
        avatar: '',
        name: '王者荣耀',
        host: '',
        type: '游戏',
        introduction: '全世界最好玩的游戏'
      },
      imageUrl: '',
      options: ['文学', '人物', '游戏', '影视', '动漫', '科技', '休闲', '高校']
    }
  },
  computed: {
    barList () {
      if (this.activeItem === '我的') {
        return this.followBarList
      } else {
        return this.barAllList.filter(item => {
          return item.type === this.activeItem
        })
      }
    },
    actionUrl () {
      return baseUrl + 'createBar'
    }
  },
  created () {
    this.initBarInfo()
  },
  methods: {
    // 获取贴吧列表
    async initBarInfo () {
      const res = await getAllBar()
      const res1 = await getFollowBar(getId())
      this.barAllList = res.barList
      this.followBarList = res1.barList
    },
    // 设置当前分类
    setActiveItem (value) {
      this.activeItem = value
    },
    // 新建吧
    createBar () {
      this.barInfo.host = this.$store.getters.id
      this.$refs.upload.submit()
    },
    // 创建成功时
    onSuccess (res) {
      if (res.code === 200) {
        this.$message.success({
          duration: 1000,
          message: res.message
        })
      } else {
        this.$message.error({
          duration: 1000,
          message: res.message
        })
      }
      this.dialogFormVisible = false
    },
    // 切换时
    onChange (file, fileList) {
      if (fileList.length > 1) {
        fileList.shift()
      }
      this.imageUrl = URL.createObjectURL(file.raw)
    }
  }
}
</script>

<style scoped lang="less">
.bar-center {
  width: 1000px;
  margin: 20px auto;

  .el-aside {
    background-color: @gray;
    border-right: 1px solid #e2e2e5;

    .aside-item {
      height: 56px;
      line-height: 56px;
      text-align: center;
      border-bottom: 1px solid @gray-p;

      i {
        margin-right: 10px;
      }

      ::selection {
        background: none;
      }
    }

    .aside-item:hover {
      background-color: @gray-p;
      cursor: pointer;
    }

    .active {
      background-color: @menuColor;
      color: @menuText_light;
    }

    .active:hover {
      background-color: @menuColor;
      color: @menuText_light;
    }

    .button {
      height: 56px;
      line-height: 56px;
      text-align: center;
      margin: 20px 0;
      color: @menuColor;
      cursor: pointer;
      font-size: large;
    }

    /deep/
    .el-upload {
      height: 100px;
      width: 100px;
      line-height: 0;

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        margin: 0;
      }
    }

    .dialog-footer {
      display: flex;
      justify-content: center;
    }
  }

  .el-main {
    .main-item:hover {
      box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.3);
    }
  }
}

</style>
